<template>
  <div class="boxsty zhiBiao">
    <!--    <div class="flex justifyContentSpaceBetween">-->
    <!--      <div class="tabletext">{{pageTitle}}</div>-->
    <!--    </div>-->
    <div :height="searchheight">
      <span
        style="float: right; margin-top: -30px; cursor: pointer"
        @click="searchchangeadvanced"
        >{{ searchadvanced ? "收起" : "展开" }}
        <i
          :class="searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
        />
      </span>
      <div v-show="searchadvanced">
        <contractDetailHeader
          :contractDetailHeaderData="hetongzhibiaoTable.rows"
        ></contractDetailHeader>
      </div>
      <div v-show="searchadvanced">
        <el-form
          :inline="true"
          :model="dataForm"
          @keyup.enter.native="getDataList()"
          class="form-inline"
          v-if="showSearch"
        >
          <el-form-item label="指标类别">
            <el-input
              v-model="dataForm.zhibiaoType"
              placeholder="指标类别"
              :clearable="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="指标名称">
            <el-input
              v-model="dataForm.zhibiaoName"
              placeholder="指标名称"
              :clearable="true"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              icon="el-icon-search"
              type="primary"
              class="marginLeft"
              @click="getDataList(1)"
              >检索
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div
      class="table-header-btn-box"
      style="text-align: right"
      v-if="lastPage == 'jghz' || lastPage == 'qtjc'"
    >
      <el-button type="danger" plain v-if="hetongzhibiaoTable.page == 'jghz'" @click="delBtn">删除</el-button>
      <el-button
        plain
        v-if="hetongzhibiaoTable.page == 'jghz'"
        type="primary"
        @click="showZhibiaoTable"
        >指标库</el-button
      >
      <el-button
        plain
        v-if="
          hetongzhibiaoTable.page == 'jghz' &&
          hetongzhibiaoTable.contractAuditStatus == 13
        "
        type="primary"
        @click="submitAll"
        >批量提交</el-button
      >

      <el-button
        plain
        v-if="this.hetongzhibiaoTable.page == 'qtjc'"
        type="primary"
        @click="jghzokAll"
        v-loading.fullscreen.lock="fullscreenLoading"
        >审批处理</el-button
      >
      <el-button
        plain
        v-if="hetongzhibiaoTable.page == 'jghz'"
        type="primary"
        @click="getoptionsList"

        >查看领导审批意见</el-button
      >
      <el-button plain type="primary" @click="fnBackOldPage('返回原页面')"
        >返回</el-button
      >
    </div>

    <div class="avue-crud">
      <div class="border-top-theme" v-if="pageTitle == '业绩合同'">
        <div class="mt10"></div>
      </div>
      <el-table
        ref="tableRef"
        style="width: 100%; margin-top: 20px"
        :data="dataList"
        border
        v-loading="dataListLoading"
      >

        <el-table-column v-if="hetongzhibiaoTable.page == 'jghz'"  type="selection" width="55" :selectable='checkboxT'></el-table-column>
        <el-table-column
          type="index"
          width="80"
          header-align="center"
          align="center"
          label="序号"
        ></el-table-column>
        <el-table-column
          v-if="hetongzhibiaoTable.shows == '1'"
          prop="shouyueName"
          header-align="center"
          align="center"
          min-width="120"
          label="受约人姓名"
        >
        </el-table-column>
        <el-table-column
          v-if="hetongzhibiaoTable.shows == '2'"
          prop="jigouName"
          header-align="center"
          align="center"
          min-width="120"
          label="机构名称"
        >
        </el-table-column>
        <el-table-column
          prop="zhibiaoType"
          header-align="center"
          align="center"
          min-width="100"
          label="指标类别"
        >
        </el-table-column>
        <el-table-column
          prop="zhibiaoName"
          header-align="center"
          align="center"
          min-width="100"
          show-overflow-tooltip
          label="指标名称"
        >
        </el-table-column>
        <el-table-column
          prop="weight"
          header-align="center"
          min-width="100"
          align="center"
          label="权重"
        >
          <template slot-scope="scope">
            <el-input
              v-if="lastPage == 'qtjc'"
              :max="100"
              min="0"
              size="mini"
              type="number"
              oninput="if(value>100)value=100"
              v-model="scope.row.weight"
              @change="saveProperty(scope.row, scope.$index)"
            ></el-input>
            <span v-else>{{ scope.row.weight }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="targetValue"
          header-align="center"
          align="center"
          min-width="250"
          label="目标值"
        >
          <template slot-scope="scope">
            <el-input
              v-if="lastPage == 'qtjc'"
              size="mini"
              type="textarea"
              :rows="1"
              v-model="scope.row.targetValue"
              @change="saveProperty(scope.row, scope.$index)"
            ></el-input>
            <span v-else>{{ scope.row.targetValue }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="unit"
          header-align="center"
          align="center"
          min-width="100"
          label="单位"
        >
        </el-table-column>
        <el-table-column
          prop="formulaId"
          label="计算公式"
          min-width="120"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <div v-for="item in formulaOptions">
              <span v-if="item.id == scope.row.formulaId">{{ item.gsMc }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="hetongzhibiaoTable.page == 'jghz'"
          prop="remark"
          header-align="center"
          align="center"
          min-width="100"
          label="领导审批意见"
        >
        </el-table-column>
        <el-table-column
          v-if="hetongzhibiaoTable.page == 'qtjc'"
          prop="ytbSz"
          label="填报值(预)"
          min-width="120"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <span
              v-if="
                hetongzhibiaoTable.contractAuditStatus * 1 > 13 ||
                scope.row.zhibiaoType == '奖惩类'
              "
              >{{ scope.row.ytbSz }}</span
            >
            <el-input
              v-else
              :disabled="hetongzhibiaoTable.operationType == 1"
              v-model="scope.row.ytbSz"
              size="mini"
              placeholder="请输入内容"
              @change="saveProperty(scope.row, scope.$index)"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="tbSz"
          label="填报值"
          min-width="120"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <!-- <span
              v-if="
                hetongzhibiaoTable.contractAuditStatus * 1 > 13 ||
                scope.row.zhibiaoType == '奖惩类'
              "
              >{{ scope.row.tbSz }}</span
            > v-else-->
            <el-input
              :disabled="hetongzhibiaoTable.operationType == 0"
              v-model="scope.row.tbSz"
              size="mini"
              placeholder="请输入内容"
              @change="saveProperty(scope.row, scope.$index)"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="zbDf"
          header-align="center"
          align="center"
          min-width="100"
          label="得分"
        >
          <template slot-scope="scope">
            <!-- <div v-if="hetongzhibiaoTable.page == 'qtjc'">
              <el-input
                size="mini"
                v-model="scope.row.zbDf"
                placeholder="请输入内容"
                @change="saveProperty(scope.row, scope.$index)"
              ></el-input>
            </div> -->
            <!-- <span v-if="scope.row.isEditPropertyShow"> -->
            <!-- <span
              v-else-if="
                hetongzhibiaoTable.page == 'jghz' &&
                scope.row.contractAuditStatus == 13
              "
            > -->
              <el-input
                v-model="scope.row.zbDf"
                size="mini"
                placeholder="请输入内容"
                @change="saveProperty(scope.row, scope.$index)"
              />
            <!-- </span>
            <span v-else>{{ scope.row.zbDf }}</span> -->
          </template>
        </el-table-column>
        <el-table-column
          prop="auditStatus"
          header-align="center"
          align="center"
          min-width="100"
          label="状态"
          :formatter="auditStatusFormater"
        >
        </el-table-column>
      </el-table>
    </div>
    <!-- 弹窗, 新增 / 修改 -->
    <!-- 编辑-->
    <div class="avue-crud__pagination">
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        background
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </div>
    <div class="text-center" v-if="showBackBtn"></div>
    <el-dialog title="业绩合同指标库" :visible.sync="dialogVisible" width="80%">
      <zhibiaoTable
        ref="zhibiaoRef"
        :hetongId="hetongId"
        @func="getRow"
      ></zhibiaoTable>
      <span slot="footer" class="dialog-footer">
        <el-button plain type="primary" @click="addZhibiao">添 加</el-button>
        <el-button plain @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <sortingPerChooseDialog
      :sortingPerChooseDialogData="sortingPerChooseDialogData"
      @sortingPerChooseDialogChild="sortingPerChooseDialogChild"
    ></sortingPerChooseDialog>
    <el-dialog title="领导审批意见" :visible.sync="yjdialogVisible" width="30%">
      <el-table
        ref="tableRefs"
        style="width: 100%; margin-top: 20px"
        :data="optionsList"
        border
        v-loading="dataListLoading"
      >
        <el-table-column
          prop="ry_name"
          label="审批人"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="message_"
          label="审批意见"
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="time_"
          label="审批时间"
          header-align="center"
          align="center"
        >
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="yjdialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  fetchList,
  delObj,
  putObj,
  getFormula,
  saveZbData,
  jghzokAll,
  getLdshOpinions,
  jghzbackAll,
  getnormlist,
} from "@/api/hetongrenwu/hetongzhibiaohz";
import { deleteBatch } from "@/api/hetongrenwu/hetongyeji/hetongzb";
import { mapGetters } from "vuex";
import zhibiaoForm from "@/views/hetongrenwu/components/zhibiao-form.vue";
import zhibiaoTable from "@/views/hetongrenwu/hetong/hetongyeji/zhibiaoTable";
import sortingPerChooseDialog from "@/views/hetongrenwu/components/sortingPerChooseDialog.vue";
import { saveZB } from "@/api/hetongrenwu/zhibiaoTable";
import contractDetailHeader from "@/views/hetongrenwu/components/contractDetailHeader";

export default {
  components: {
    zhibiaoForm,
    zhibiaoTable,
    sortingPerChooseDialog,
    contractDetailHeader,
  },
  props: {
    hetongzhibiaoTable: {},
    hetong: {},
  },
  data() {
    return {
      pageTitle: "业绩合同",
      dataList: [],
      dataForm: {
        key: "",
      },
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      addOrUpdateVisible: false,
      radio: "1",
      radioTwo: "-1",
      zhibiaoForm: {},
      lastPage: "jghz",
      showSearch: true,
      showBackBtn: true,
      fullscreenLoading: false,
      visible: false,
      dataFormjia: {
        key: "",
      },
      status: Number,
      searchadvanced: true,
      searchheight: "0",
      hetongId: Number,
      dialogVisible: false,
      formulaOptions: [],
      taskId: 0,
      sortingPerChooseDialogData: {},
      yjdialogVisible: false,
      optionsList: [],
    };
  },
  watch: {
    hetongzhibiaoTable: {
      handler(newVal) {
        if (newVal) {
          this.hetongId = newVal.hetongId;
          this.str = newVal.str;
          this.taskId = newVal.taskId;
          this.getDataList();
          console.log(this.lastPage)
        }
      },
      deep: true,
      immediate: true,
    },
    radio(value) {
      if (value) {
        this.getDataList();
      }
    },
  },
  created() {
    this.getFormula();
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  methods: {
    searchchangeadvanced() {
      this.searchadvanced = !this.searchadvanced;
      if (this.searchadvanced) {
        this.searchheight = "auto";
      }
    },
    statusFormater(row, column) {
      const status = row.signLevel;
      if (status == 1) {
        return "一级合同";
      } else if (status == 2) {
        return "二级合同";
      } else if (status == 3) {
        return "三级合同";
      } else if (status == 4) {
        return "四级合同";
      } else if (status == 5) {
        return "五级合同";
      }
    },
    init(data) {
      this.lastPage = data.lastPage;
      this.showSearch = data.showSearch;
      this.pageTitle = data.pageTitle;
      this.showBackBtn = data.showBackBtn;
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      var params = {
        htId: this.hetongId,
        str: this.str,
        typedatas: this.hetongzhibiaoTable.type,
        type: this.hetongzhibiaoTable.show
          ? this.hetongzhibiaoTable.show
          : this.hetongzhibiaoTable.type1,
        isbenbu: this.radioTwo,
        zhibiaoType: this.dataForm.zhiibiaoType,
        zhibiaoName: this.dataForm.zhibiaoName,
      };
      fetchList(params).then((response) => {
        this.dataList = response.data.data.records;
        this.totalPage = response.data.data.total;
        this.dataListLoading = false;
      });
    },
    //
    getoptionsList() {
      getLdshOpinions({ id: this.hetongId }).then((res) => {
        this.yjdialogVisible = true;
        this.optionsList = res.data.data;
      });
    },
    // 修改属性
    editProperty(row, index) {
      this.$set(this.dataList[index], "isEditPropertyShow", true);
      this.getFormula();
    },
    getFormula() {
      getFormula().then((res) => {
        this.formulaOptions = res.data.data;
      });
    },

    // 保存属性
    saveProperty(row, index) {
      if (row.zhibiaoType == "奖惩类") {
        getnormlist({ normjks: row.zbDf, normid: row.zhibiaoId }).then(
          (res) => {
            if (res.data.data == 0) {
              this.$confirm(
                "您填写的得分已超出加扣范围，是否继续填写得分！",
                "提示",
                {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning",
                }
              )
                .then((res) => {
                  putObj(row)
                    .then((res) => {
                      this.$message.closeAll();
                      this.$message.success("保存成功！");
                    })
                    .then((res) => {
                      this.getDataList();
                    });
                })
                .catch((res) => {
                  this.getDataList();
                });
            } else {
              putObj(row).then((res) => {
                //刷新列表
                this.getDataList();
              });
            }
          }
        );
      } else {
        putObj(row).then((res) => {
          //刷新列表
          this.getDataList();
        });
      }
    },
    // 取消编辑
    cancelProperty(row, index) {
      this.$set(this.dataList[index], "isEditPropertyShow", false);
      this.getDataList();
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },
    // 删除
    delBtn() {
      var ids = ""
      var data = this.$refs.tableRef.selection;
      console.log(data)
      if(data.length == 0){
        this.$message.warning('请勾选所要删除的数据')
        return
      }
      data.forEach(item=>{
        ids = ids + item.id + ','
      })
      this.$confirm("是否确认删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(res=> {
          deleteBatch({ids:ids}).then((data) => {
          this.$message.closeAll();
          this.$message.success("删除成功");
          this.getDataList();
        });
        })

    },
    checkboxT(row){
      if(row.isNew == 0){
        return false
      }else{
        return true
      }
    },
    //返回原来的页面
    fnBackOldPage(type) {
      this.$emit("fnBackOldPage", type);
    },
    //打开加扣维护弹框
    fnOpenJiaKou(obj) {
      confirmStatus(this.hetongId).then((response) => {
        this.status = response.data.data;
        this.visible = true;
        this.dataFormjia.id = obj.id;
      });
    },
    //关闭加扣维护弹框
    closeDialog() {
      this.visible = false;
      this.$refs["dataFormjia"].resetFields();
    },
    showZhibiaoTable() {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.zhibiaoRef.init(this.hetongzhibiaoTable.type, 3);
        this.$refs.zhibiaoRef.getDataList();
      });
    },
    addZhibiao() {
      this.$refs.zhibiaoRef.saveZhibiao(this.dataList);
    },
    getRow(rows) {
      saveZB({ rows: rows, hetongId: this.hetongId,lastPage:"jghz" }).then((res) => {
        this.dialogVisible = false;
        this.getDataList();
      });
    },
    //批量保存
    saveZbData() {
      saveZbData({
        htId: this.hetongId,
        htzbList: this.$refs.tableRef.data,
      }).then((response) => {
        this.$message.closeAll();
        this.$message.success("保存成功");
        this.getDataList();
      });
    },
    //批量提交
    submitAll() {
      var objv = "";
      this.$confirm("是否逐个审批？", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      })
        .then((res) => {
          objv = 0;
        })
        .catch(() => {
          objv = 1;
        })
        .then(() => {
          this.objdata = objv;
          this.sortingPerChooseDialogData = {
            visible: true,
            objdata: objv,
            rows: this.hetong,
            types: "jghz",
          };
        });
    },

    //批量通过
    jghzokAll() {
      const rows = this.dataList;
      if (rows.length > 0) {
        for (var i in rows) {
          if (rows[i].tbzbStatus == 2) {
            this.$message.closeAll();
            this.$message({
              type: "info",
              message: "当前选择数据状态存在已驳回",
            });
            return;
          }
        }
        this.$prompt("请对这" + rows.length + "条指标填写审批意见", "提示", {
          confirmButtonText: "通过",
          cancelButtonText: "取消",
          inputValue:"暂无意见"
        })
          .then(({ value }) => {
            this.fullscreenLoading = true;
            jghzokAll({
              rows: rows,
              streamId: this.hetongzhibiaoTable.streamId,
              programInterface: this.hetongzhibiaoTable.programInterface,
              taskId: this.taskId,
              remark: value,
            })
              .then((res) => {
                this.$message.closeAll();
                this.$message({
                  type: "info",
                  message: res.data.data + "条指标已通过",
                });
                this.fullscreenLoading = false;
                this.fnBackOldPage("返回原页面");
                this.getDataList();
              })
              .catch(() => {
                this.$message.closeAll();
                this.$message({
                  type: "error",
                  message: "提交失败!",
                });
                this.fullscreenLoading = false;
                this.fnBackOldPage("返回原页面");
                this.getDataList();
              });
          })
          .catch(() => {
            this.$message.closeAll();
            this.$message({
              type: "info",
              message: "已取消提交",
            });
            this.fnBackOldPage("返回原页面");
          });
      } else {
        this.$message.closeAll();
        this.$message({
          type: "info",
          message: "请选择指标通过!",
        });
      }
    },
    //批量驳回
    jghzbackAll() {
      const rows = this.$refs.tableRef.selection;
      if (rows.length > 0) {
        this.$confirm("是否要驳回" + rows.length + "条指标?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            jghzbackAll(rows)
              .then((res) => {
                this.$message.closeAll();
                this.$message({
                  type: "info",
                  message: res.data.data + "条指标已驳回",
                });
                this.getDataList();
                this.fnBackOldPage("返回原页面");
              })
              .catch(() => {
                this.$message.closeAll();
                this.$message({
                  type: "error",
                  message: "提交失败!",
                });
                this.getDataList();
                this.fnBackOldPage("返回原页面");
              });
          })
          .catch(() => {
            this.$message.closeAll();
            this.$message({
              type: "info",
              message: "已取消提交",
            });
          });
      } else {
        this.$message.closeAll();
        this.$message({
          type: "info",
          message: "请选择指标驳回!",
        });
      }
    },
    auditStatusFormater(row, column) {
      const auditStatus = row.auditStatus;
      if (auditStatus == 0) {
        return "未提报";
      } else if (auditStatus == 1) {
        return "填报中";
      } else if (auditStatus == 2) {
        return "审核中";
      } else if (auditStatus == 3) {
        return "已经审核";
      } else if (auditStatus == 4) {
        return "审核驳回";
      } else if (auditStatus == 5) {
        return "结果填报中";
      } else if (auditStatus == 6) {
        return "结果填报完成";
      }
    },
    tbzbStatusFormater(row, column) {
      const status = row.tbzbStatus;
      if (status == 0) {
        return "未提交";
      } else if (status == 1) {
        return "未审核";
      } else if (status == 2) {
        return "已驳回";
      } else if (status == 3) {
        return "已通过";
      } else if (status == 4) {
        return "结果审核中";
      } else if (status == 5) {
        return "结果已驳回";
      } else if (status == 6) {
        return "结果已通过";
      }
    },
    sortingPerChooseDialogChild(data) {
      this.fnBackOldPage("返回原页面");
    },
  },
};
</script>
